import './Investment.scss'
import './Scss/Investment.scss'
import dayjs from 'dayjs'
import { Column } from '@ant-design/plots'
import { DatePicker, Progress } from 'antd'
import { useEffect, useState, useRef } from 'react'
import { useRequest, useSize } from 'ahooks'

import { Http } from '../../../../Common/Api'
import { TitleSmall001 } from '../Common/SmallTitle'
import { WebCommonUrl } from '../../../../Common/Configure/CommonParameter'
import { ColumnStyle, ColumnConfigA01Template } from './AssetsCharts'
import { FrontModalBox } from '../Modal'

export const Investment001 = ({ org }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const { runAsync: getProgressGetTotalInvest } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            const { accumulativeAmount, thisMonthAmount, thisYearAmount, totalAmount } = list[0]
            setData([
                { type: '总投资额', value: parseInt(totalAmount / 10000) || 0 },
                { type: '累计投资', value: parseInt(accumulativeAmount / 10000) || 0 },
                { type: '本年投资', value: parseInt(thisYearAmount / 10000) || 0 },
                { type: '本月投资', value: parseInt(thisMonthAmount / 10000) || 0 },
            ])
        },
    })

    const { runAsync: getTotalInvestOrg } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            const { totalAmount, accumulativeAmount, thisYearAmount, thisMonthAmount } = list[0]
            setData([
                { type: '总投资额', value: parseInt(totalAmount / 10000) || 0 },
                { type: '累计投资', value: parseInt(accumulativeAmount / 10000) || 0 },
                { type: '本年投资', value: parseInt(thisYearAmount / 10000) || 0 },
                { type: '本月投资', value: parseInt(thisMonthAmount / 10000) || 0 },
            ])
        },
    })

    useEffect(() => {
        if (org) {
            getTotalInvestOrg({
                url: 'getTotalInvestOrg',
                data: { date: dayjs().format('YYYY-MM'), OrganizationUuid: org },
            })
        } else {
            getProgressGetTotalInvest({ url: 'getProgressGetTotalInvest', data: { date: dayjs().format('YYYY-MM') } })
        }
    }, [getProgressGetTotalInvest, getTotalInvestOrg, org])

    const [Data, setData] = useState([
        { type: '总投资额', value: 0 },
        { type: '累计投资', value: 0 },
        { type: '本年投资', value: 0 },
        { type: '本月投资', value: 0 },
    ])

    const [Charts, setCharts] = useState()

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                data: Data,
                autoFit: false,
                width,
                height: height,
                appendPadding: 16,
                maxColumnWidth: 14,
                xField: 'type',
                yField: 'value',
                seriesField: 'type',
                color: [
                    'l(90) 0:rgba(255, 218, 138, 1) 1:rgba(255, 218, 138, 0.4)',
                    'l(90) 0:rgba(199, 255, 239, 1) 1:rgba(199, 255, 239, 0.4)',
                    'l(90) 0:rgba(152, 179, 255, 1) 1:rgba(152, 179, 255, 0.4)',
                    'l(90) 0:rgba(0, 133, 88, 1) 1:rgba(0, 133, 88, 0.4)',
                ],
                legend: false,
                xAxis: {
                    label: { style: { fill: '#fff' } },
                    line: { style: { stroke: '#3AA8E2' } },
                    tickLine: { style: { stroke: '#3AA8E2' } },
                },
                yAxis: {
                    title: { text: '万', position: 'end', autoRotate: false, offset: -15, style: { fill: '#fff' } },
                    tickCount: 5,
                    label: { style: { fill: '#fff' }, formatter: e => e },
                    grid: { line: { style: { stroke: 'rgba(58, 168, 226, 0.2)' } } },
                },
                tooltip: {
                    formatter: ({ type, value }) => {
                        return { name: '金额', value: `${value} 万 ` }
                    },
                },
            }
            setCharts(config)
        }
    }, [Data, size])

    return (
        <div className="Investment001" ref={ChartsBox}>
            {Charts && <Column {...Charts} />}
        </div>
    )
}

const A01List = [
    { uuid: 1, title: '总投资额', value: '总额', unit: '万元', img: 'MaterialTransportationA01_A01.png' },
    { uuid: 2, title: '累积投资', value: '累计投资', unit: '万元', img: 'MaterialTransportationA01_A01.png' },
    { uuid: 3, title: '本年投资', value: '本年投资', unit: '万元', img: 'MaterialTransportationA01_A01.png' },
    { uuid: 4, title: '本月投资', value: '本月投资', unit: '万元', img: 'MaterialTransportationA01_A01.png' },
]

const A01Color = [
    'rgba(171, 238, 238, 1)',
    'rgba(0, 208, 175, 1)',
    'rgba(173, 255, 157, 1)',
    'rgba(255, 120, 119, 1)',
    'rgba(163, 207, 255, 1)',
    'rgba(171, 238, 238, 1)',
    'rgba(0, 208, 175, 1)',
    'rgba(173, 255, 157, 1)',
    'rgba(255, 120, 119, 1)',
    'rgba(163, 207, 255, 1)',
    'rgba(171, 238, 238, 1)',
    'rgba(0, 208, 175, 1)',
    'rgba(173, 255, 157, 1)',
    'rgba(255, 120, 119, 1)',
    'rgba(163, 207, 255, 1)',
]

const A01Nav = [
    { uuid: 1, title: '总体' },
    { uuid: 2, title: '年度' },
    { uuid: 3, title: '月份' },
]

const A01Data = { 1: 'year', 2: 'month', 3: 'day' }

export const InvestmentA01 = ({ OrgEvent }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [DataA01, setDataA01] = useState({ 总额: 0, 累计投资: 0, 本年投资: 0, 本月投资: 0 })
    const [OneProgress, setOneProgress] = useState(0)
    const titleList = { 1: '年', 2: '月', 3: '日' }
    const [Org, setOrg] = useState('')
    const [Active, setActive] = useState(1)
    const [Date, setDate] = useState(dayjs())
    const [DataA03, setDataA03] = useState([])
    OrgEvent.useSubscription(val => {
        setOrg(val === '00000000-0000-0000-0000-000000000000' ? '' : val)
    })
    const { runAsync: getAll } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { 累计投资, 总额 } = res
            setOneProgress(parseInt(Number(累计投资) / Number(总额)) * 100 || 0)
            setDataA01(res)
        },
    })
    const { runAsync: getData } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setDataA03(
                res.list.flatMap(({ uuid, tableName, formerPer, thisPer, formerAmount, thisAmount }) => [
                    {
                        uuid,
                        name: `往${titleList[Active]}完成`,
                        type: tableName,
                        value: formerPer,
                        small: formerAmount,
                        date: A01Data[Active],
                        tiem: Date,
                    },
                    {
                        uuid,
                        name: `本${titleList[Active]}完成`,
                        type: tableName,
                        value: thisPer,
                        small: thisAmount,
                        date: A01Data[Active],
                        tiem: Date,
                    },
                ]),
            )
        },
    })
    useEffect(() => {
        getAll({ url: 'getNongkenTotalInvest', data: { OrganizationUuid: Org, Date: dayjs().format('YYYY-MM-DD') } })
    }, [Org, getAll])

    useEffect(() => {
        const DataTypeList = [0, 4, 7, 10]
        getData({
            url: 'getNongkenInvestStatPer',
            data: { OrganizationUuid: Org, StatDate: Date.format('YYYY-MM-DD'), DateType: DataTypeList[Active] },
        })
    }, [getData, Date, Org, Active])

    const [OptionsCall, setOptionsCall] = useState()

    return (
        <div className="InvestmentA01">
            <div className="Right">
                <div
                    className="Top"
                    onClick={() => {
                        setOptionsCall({
                            type: 'TableList',
                            data: {
                                type: 'NongKenInvestPlans',
                                title: '投资进度明细',
                                OrganizationUuid: Org,
                                uuid: { date: 'year', tiem: '', type: '' },
                            },
                        })
                    }}
                >
                    <div className="left">
                        <div>
                            <img src={WebCommonUrl + 'InvestmentA01_Back.png'} alt="" />
                            <Progress
                                trailColor="#0145A8"
                                strokeColor="#D4FFFA"
                                type="circle"
                                strokeLinecap="butt"
                                size={240}
                                strokeWidth={16}
                                percent={OneProgress}
                                format={percent => (
                                    <div className="ChartsNumber">
                                        <div>{percent}%</div>
                                        <div>完成率</div>
                                    </div>
                                )}
                            />
                        </div>
                        <div>
                            {A01List.map(({ uuid, title, value, unit, img }) => (
                                <div key={uuid}>
                                    <div>
                                        <img src={WebCommonUrl + 'MaterialTransportationA01_BTM.png'} alt="" />
                                        <img src={WebCommonUrl + img} alt="" />
                                    </div>
                                    <div>
                                        <div>{title}</div>
                                        <div>
                                            <div>
                                                {DataA01[value]}
                                                <img src={WebCommonUrl + 'MaterialTransportationA01_Num.png'} alt="" />
                                            </div>
                                            <div>{unit}</div>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
                <div className="Btm">
                    <TitleSmall001 title="投资统计" />
                    <div className="box">
                        <div className="optioins">
                            <div className="Nav">
                                {A01Nav.map(({ uuid, title }) => (
                                    <div
                                        key={uuid}
                                        className={uuid === Active ? 'active' : ''}
                                        onClick={() => setActive(uuid)}
                                    >
                                        {title}
                                        {uuid === Active && (
                                            <img src={WebCommonUrl + 'InvestmentA01_Active.png'} alt="" />
                                        )}
                                    </div>
                                ))}
                            </div>
                            <div>
                                <DatePicker
                                    style={{ width: '100%' }}
                                    picker={A01Data[Active]}
                                    defaultValue={Date}
                                    onChange={e => setDate(e)}
                                />
                            </div>
                        </div>
                        <div className="Charts" ref={ChartsBox}>
                            {size && (
                                <ColumnConfigA01Template
                                    data={DataA03}
                                    size={size}
                                    style={{
                                        ...ColumnStyle,
                                        isGroup: false,
                                        isStack: true,
                                    }}
                                    click={e => {
                                        setOptionsCall({
                                            type: 'TableList',
                                            data: {
                                                type: 'NongKenInvestPlans',
                                                title: '投资进度明细',
                                                OrganizationUuid: Org,
                                                uuid: { date: e.date, tiem: e.time, type: e.uuid },
                                            },
                                        })
                                    }}
                                />
                            )}
                        </div>
                    </div>
                </div>
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export const InvestmentA02 = ({ OrgEvent }) => {
    const ChartsBoxA01 = useRef()
    const ChartsBoxA02 = useRef()
    const sizeA01 = useSize(ChartsBoxA01)
    const sizeA02 = useSize(ChartsBoxA02)
    const [Org, setOrg] = useState('')
    const [Date, setData] = useState(dayjs())
    const [Active, setActive] = useState(1)
    const PickerList = ['year', 'month', 'date']
    OrgEvent.useSubscription(val => setOrg(val === '00000000-0000-0000-0000-000000000000' ? '' : val))

    const [DataA01, setDataA01] = useState([])
    const [DataA02, setDataA02] = useState([])

    const titleList = { 1: '年', 2: '月', 3: '日' }

    const { runAsync: getDataA } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setDataA01(
                res.list.flatMap(({ uuid, tableName, formerPer, thisPer, formerAmount, thisAmount }) => [
                    {
                        uuid,
                        name: `往${titleList[Active]}完成`,
                        type: tableName,
                        value: formerPer,
                        small: formerAmount,
                        date: PickerList[Active - 1],
                        tiem: Date,
                    },
                    {
                        uuid,
                        name: `本${titleList[Active]}完成`,
                        type: tableName,
                        value: thisPer,
                        small: thisAmount,
                        date: PickerList[Active - 1],
                        tiem: Date,
                    },
                ]),
            )
        },
    })

    const { runAsync: getDataB } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setDataA02(
                res.list.flatMap(({ uuid, tableName, formerPer, thisPer, formerAmount, thisAmount }) => [
                    {
                        uuid,
                        name: `往${titleList[Active]}完成`,
                        type: tableName,
                        value: formerPer,
                        small: formerAmount,
                        date: PickerList[Active - 1],
                        tiem: Date,
                    },
                    {
                        uuid,
                        name: `本${titleList[Active]}完成`,
                        type: tableName,
                        value: thisPer,
                        small: thisAmount,
                        date: PickerList[Active - 1],
                        tiem: Date,
                    },
                ]),
            )
        },
    })

    useEffect(() => {
        const DataTypeList = [0, 4, 7, 10]
        const data = { StatDate: Date.format('YYYY-MM-DD'), OrganizationUuid: Org }
        getDataA({ url: 'getNongkenEngineeringPer', data: { ...data, GroupId: 1, DateType: DataTypeList[Active] } })
        getDataB({ url: 'getNongkenEngineeringPer', data: { ...data, GroupId: 2, DateType: DataTypeList[Active] } })
    }, [getDataA, getDataB, Date, Org, Active])

    const [OptionsCall, setOptionsCall] = useState()

    return (
        <div className="InvestmentA02">
            <div className="Nav">
                <div>
                    {A01Nav.map(({ uuid, title }) => (
                        <div key={uuid} className={Active === uuid ? 'Active' : ''} onClick={() => setActive(uuid)}>
                            {title}
                            {Active === uuid && <img src={WebCommonUrl + 'InvestmentA01_Active.png'} alt="" />}
                        </div>
                    ))}
                </div>
                <DatePicker value={Date} picker={PickerList[Active - 1]} onChange={setData} />
            </div>
            <TitleSmall001 title="组1" />
            <div className="ChartsBox" ref={ChartsBoxA01}>
                {sizeA01 && (
                    <ColumnConfigA01Template
                        size={sizeA01}
                        data={DataA01}
                        style={{ ...ColumnStyle, isStack: true, isGroup: false, smallTitle: { file: 'small' } }}
                        click={e => {
                            setOptionsCall({
                                type: 'TableList',
                                data: {
                                    type: 'NongkenEngineeringList',
                                    title: '形象进度明细',
                                    OrganizationUuid: e.uuid,
                                    uuid: { date: e.date, tiem: e.time },
                                },
                            })
                        }}
                    />
                )}
            </div>
            <TitleSmall001 title="组2" />
            <div className="ChartsBox" ref={ChartsBoxA02}>
                {sizeA02 && (
                    <ColumnConfigA01Template
                        size={sizeA02}
                        data={DataA02}
                        style={{ ...ColumnStyle, isStack: true, isGroup: false, smallTitle: { file: 'small' } }}
                        click={e => {
                            setOptionsCall({
                                type: 'TableList',
                                data: {
                                    type: 'NongkenEngineeringList',
                                    title: '形象进度明细',
                                    OrganizationUuid: e.uuid,
                                    uuid: { date: e.date, tiem: e.time },
                                },
                            })
                        }}
                    />
                )}
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
